﻿@model IEnumerable<MVC.Models.ReadBook>

<h2>@ViewBag.Title</h2>

<h5 style="color: blue">@ViewBag.Message</h5>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Book.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Book.Author)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Book.Genre)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Rating)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DateRead)
        </th>
        <th>Actions</th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td title="@item.Book.Title by @item.Book.Author 
                @item.Book.Description">
                @Html.DisplayFor(modelItem => item.Book.Title)
            </td>
            <td title="@item.Book.Title  by @item.Book.Author 
                @item.Book.Description ">
                @Html.DisplayFor(modelItem => item.Book.Author)
            </td>

            <td title="@item.Book.Title  by @item.Book.Author 
                @item.Book.Description ">
                @Html.DisplayFor(modelItem => item.Book.Genre)
            </td>
            <td>
                <div class="rateit" id="rateit" data-productid="@item.ReadBookId" data-rateit-value="@item.Rating">
                </div>
            </td>
            <td>
                @Html.EditorFor(modelItem => item.DateRead, new {test = item.ReadBookId})
                @Html.HiddenFor(modelItem => item.ReadBookId)
            </td>
            <td>
                @Html.ActionLink("Details", "Details", new { id = item.ReadBookId }) |
                @Html.ActionLink("Remove", "Delete", new { id = item.ReadBookId })
                @if (User.Identity.Name.Equals(item.Book.Creator))
                {
                    <span> | </span>
                    @Html.ActionLink("Edit", "Edit", new { id = item.ReadBookId })
                }
            </td>
        </tr>
    }

</table>
<script type="text/javascript">
    var tooltipvalues = ['Hated It', 'Didn\'t Like it', 'Liked It', 'Really Liked It', 'Loved It'];
    $("#rateit").bind('hover', function (event, value) { $(this).attr('title', tooltipvalues[value - 1]); });
</script>

<script type="text/javascript">
    $('.rateit').bind('rated reset', function (e) {
        var ri = $(this);
        var value = ri.rateit('value');
        var readBookId = ri.data('productid');

        $.ajax({
            url: '/BookList/Rate/' + readBookId, //your server side script
            data: { rating: value }, //our data
            type: 'PUT'
        });
    });
</script>
<script type="text/javascript">
    $('input[type="date"]').change(function (e) {
        var dateInput = $(this)[0];
        var value = dateInput.value;
        var readBookId = dateInput.nextElementSibling.value;

        $.ajax({
            url: '/BookList/Date/' + readBookId, //your server side script
            data: { date: value }, //our data
            type: 'PUT'
        });
    });
</script>